
//全省旅行社组团
let provinceDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
let provinceNum = [780, 690, 710, 790, 800, 820, 756, 809,750,840,862,713,]
let provinceGroup =[ 600, 520, 656, 690,700,620,662,613,680, 690, 310, 590,]
function buildChart1() {
  var myChart = echarts.init(document.getElementById('province'));
  option = {
    grid: {
      top: '15%',
      right: '3%',
      left: '10%',
      bottom: '12%'
    },
    legend:{
      data:['游客量（万人）','团队个数'],
      textStyle: {
        color: '#fff'
      },
      top:'10%',
      right:"10%",
      itemHeight: 10,
      itemWidth: 20
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [{
      type: 'category',
      color: '#59588D',
      data: provinceDate,
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        show:false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    yAxis: [{
      min: 0,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    series: [
      // {
      //   name:'游客量（万人）',
      //   type: 'bar',
      //   data:provinceNum ,
      //   barMaxWidth: 12,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: 'rgb(98,145,242)'
      //       },
      //         {
      //           offset: 1,
      //           color: 'rgb(10,41,190)'
      //       }], false),
      //     }
      //   }
      // },
      {
        name: '游客量（万人）',
        type: 'line',
        data:provinceNum,
      symbol: 'none',
      smooth: true,
      symbolSize: 5,
      showSymbol: false,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: ' rgba(13,241,222,0.5)'
          }, {
            offset: 0.3,
            color: 'rgba(13,241,222,0)'
          }, {
            offset: 1,
            color: 'rgba(13,241,222,0)'
          }], false),
        },
      },
      itemStyle: {
        color: "rgba(13,241,222,1)"
      },
      },
      // {
      //   type: 'bar',
      //   name:'团队个数',
      //   data: provinceGroup,
      //   barMaxWidth: 12,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color:  'rgb(47,230,252)'
      //       },
      //         {
      //           offset: 1,
      //           color:'rgb(40,97,214)'
      //       }], false),
      //     }
      //   }
      // }
      {
        name: '团队个数',
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(37,195,121,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(37,195,121,0)'
            }, {
              offset: 1,
              color: 'rgba(37,195,121,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "rgba(37,195,121,1)"
        },
        data: provinceGroup
      }
    ]
  };
  myChart.setOption(option);
}
buildChart1()
$(".radio-box #yearProvince").click(function (e) {
  provinceDate = ['2019','2018','2017','2016','2015']
  provinceNum = [23555,12541,21541,12423,21541,]
  provinceGroup = [8201,3502,8940,3241,3111]
  buildChart1()
});
$(".radio-box #monthlyProvince").click(function (e) {
  provinceDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
  provinceNum = [780, 690, 810, 890, 900, 920, 856, 809,850,840,862,813,]
  provinceGroup =[ 400, 420, 356, 409,350,340,362,413,380, 390, 310, 390,]
  buildChart1()
});

//国内旅行社组团
let domesticDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
let domesticNum = [1780, 1690, 1810, 1890, 1900, 1920, 1856, 1809,1850,1840,1862,1813,]
let domesticGroup =[ 1400, 1420, 3156, 1409,1350,1340,1362,1413,1380, 1390, 1310, 1390,]
function buildChart2() {
  var myChart = echarts.init(document.getElementById('domestic'));
  option = {
    grid: {
      top: '15%',
      right: '3%',
      left: '10%',
      bottom: '12%'
    },
    legend: {
      data: domesticDate,
      textStyle: {
        color: '#f0f'
      }
    },
    xAxis: [{
      type: 'category',
      color: '#59588D',
      data: domesticDate,
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        show:false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    yAxis: [{
      min: 0,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    series: [
      // {
      //   type: 'bar',
      //   data:domesticNum ,
      //   barMaxWidth: 12,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color:  'rgb(47,230,252)'
      //       },
      //         {
      //           offset: 1,
      //           color:'rgb(40,97,214)'
      //       }], false),
      //     }
      //   }
      // },
      // {
      //   type: 'bar',
      //   data: domesticGroup,
      //   barMaxWidth: 12,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: 'rgb(98,145,242)'
      //       },
      //         {
      //           offset: 1,
      //           color: 'rgb(10,41,190)'
      //       }], false),
      //     }
      //   }
      // }
      {
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(37,195,121,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(37,195,121,0)'
            }, {
              offset: 1,
              color: 'rgba(37,195,121,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "rgba(37,195,121,1)"
        },
        data: domesticNum
      },
      {
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "rgba(208,99,10,1)"
        },
        data: provinceGroup
      }
    ]
  };
  myChart.setOption(option);
}
buildChart2()
$(".radio-box #yearDomestic").click(function (e) {
  domesticDate = ['2019','2018','2017','2016','2015']
  domesticDate = [23555,12541,21541,12423,21541,]
  domesticGroup = [8201,3502,8940,3241,3111]
  buildChart2()
});
$(".radio-box #monthlyDomestic").click(function (e) {
  domesticDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
  domesticDate = [780, 690, 810, 890, 900, 920, 856, 809,850,840,862,813,]
  domesticGroup =[ 400, 420, 356, 409,350,340,362,413,380, 390, 310, 390,]
  buildChart2()
});

//处境旅行社组团
let departureDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
let departureNum = [780, 690, 810, 890, 900, 920, 856, 809,850,840,862,813,]
let departureGroup =[ 400, 420, 356, 409,350,340,362,413,380, 390, 310, 390,]
function buildChart3() {
  var myChart = echarts.init(document.getElementById('departure'));
  option = {
    grid: {
      top: '15%',
      right: '3%',
      left: '10%',
      bottom: '12%'
    },
    legend: {
      data: ['游客量（万人）','团队个数'],
      textStyle: {
        color: '#fff'
      },
      top:'10%',
      right:"10%",
      itemHeight: 10,
      itemWidth: 20
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [{
      type: 'category',
      color: '#59588D',
      data: departureDate,
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        show:false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    yAxis: [{
      min: 0,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        textStyle: {
          fontSize: 12
        },
      },
    }],
    series: [
      // {
      //   type: 'bar',
      //   name:'游客量（万人）',
      //   data:departureNum ,
      //   barMaxWidth: 12,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: 'rgb(98,145,242)'
      //       },
      //         {
      //           offset: 1,
      //           color: 'rgb(10,41,190)'
      //       }], false),
      //     }
      //   }
      // },
      // {
      //   type: 'bar',
      //   name:'团队个数',
      //   data: departureGroup,
      //   barMaxWidth: 12,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color:  'rgb(47,230,252)'
      //       },
      //         {
      //           offset: 1,
      //           color:'rgb(40,97,214)'
      //       }], false),
      //     }
      //   }
      // }
      {
        name:'游客量（万人）',
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(40,97,214,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(40,97,214,0)'
            }, {
              offset: 1,
              color: 'rgba(40,97,214,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "rgba(40,97,214,1)"
        },
        data: domesticNum
      },
      {
        name:'团队个数',
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(121,28,151,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(121,28,151,0)'
            }, {
              offset: 1,
              color: 'rgba(121,28,151,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "rgba(121,28,151,1)"
        },
        data: provinceGroup
      }
    ]
  };
  myChart.setOption(option);
}
buildChart3()
$(".radio-box #yearDeparture").click(function (e) {
  departureDate = ['2019','2018','2017','2016','2015']
  departureNum = [23555,12541,21541,12423,21541,]
  departureGroup = [8201,3502,8940,3241,3111]
  buildChart3()
});
$(".radio-box #monthlyDeparture").click(function (e) {
  departureDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
  departureNum = [780, 690, 810, 890, 900, 920, 856, 809,850,840,862,813,]
  departureGroup =[ 400, 420, 356, 409,350,340,362,413,380, 390, 310, 390,]
  buildChart3()
});

//世界地图
var data = [
  {
    name: '2256',
    value: 2256
  },
  {
    name:'7254',
    value:7254
  }
]
var geoCoordMap = {
  '2256': [-95.712891, 37.09024],
  '7254': [138.252924, 36.204824],
}
function convertData(data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
}
function buildChart4() {
  var myChart = echarts.init(document.getElementById('map'));
  option = {

    geo: {
      map: 'world',
      roam: 'move',
      // scaleLimit:{
      //   max:'1.2',
      //   min:'0.7'
      // },
      label: {
        normal: {
          show: false,
          textStyle: {
            color: 'rgba(0,0,0,0.6)',
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#fff'
        },
        emphasis: {
          areaColor: null,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    "series": [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: 20,
        symbol: 'path://M35.025,17.608c-5.209-4.786-11.483-2.301-15.303-4.281v-1.482c0-0.41-0.333-0.743-0.743-0.743c-0.411,0-0.743,0.333-0.743,0.743v24.682c-1.855,0.104-3.261,0.59-3.261,1.175c0,0.661,1.793,1.197,4.005,1.197c2.21,0,4.003-0.536,4.003-1.197c0-0.585-1.405-1.071-3.261-1.175V26.151C24.575,24.573,28.408,17.166,35.025,17.608z',
        symbolRotate: 0,
        // symbolOffset: ['50%', '-100%'],
        label: {
          normal: {
            formatter: '{b}',
            position: 'top',
            show: false,
            textStyle: {
              color: '#000000',
              fontSize: 16
            }

          },
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            color: '#F06C00'//图标颜色
          }
        }
      },
      {
        "data": [
          {
            name: 'United States',
            value: 2256
          },
          {
            'name': 'Japan',
            'value': 7254
          },
        ],
        // roam: true,
        "itemStyle": {
          "emphasis": {
            "areaColor": "#14C6CA"
          },
          "normal": {
            "areaColor": "#28D8E8"
          }
        },
        "label": {
          "normal": {
            "show": false,
            color:"#FFF"
          }
        },
        "mapType": "china",
        "map": 'world',
        "type": "map",
        // zoom: 1.2,
        tooltip: {
          show: true
        },

      },

    ],
  };

  myChart.setOption(option);
}
buildChart4()

//出境游停留时间

function buildChart5() {
  var myChart = echarts.init(document.getElementById('residenceTime'));
  option = {
    color:['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379'],
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      right:"20%",
      y:'center',
      itemHeight:10,
      itemWidth:20,
      textStyle:{
        color:"#FFf"
      },
      data:['4天以下','4-6天','7-10天','10天以上']
    },
    series: [
      {
        name:'出境游停留时间',
        type:'pie',
        radius: ['50%', '70%'],
        center:['30%','50%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data:[
          {value:335, name:'4天以下'},
          {value:310, name:'4-6天'},
          {value:234, name:'7-10天'},
          {value:135, name:'10天以上'}
        ]
      }
    ]
  };

  myChart.setOption(option);
}
buildChart5()

//出境目的地国家
function buildChart6() {
  let countryData = ['泰国','日本','韩国','新加坡','美国','法国','德国','意大利','英国','澳大利亚']
  let num = [1921, 1533, 1477, 1039, 955,901,854,804,751,201,]
  var myChart = echarts.init(document.getElementById('destination'));
  option = {
    grid: {
      show:'true',
      borderWidth:'0',
      height:"90%",
      width:"72%",
      x:"20%",
      y:"2%",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: "{b0}: {c0}"
      /*formatter: function(params) {
          var result = '';
          params.forEach(function (item) {
              result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
          });
          return result;
      }*/
    },
    xAxis: {
      show: false,                //是否显示x轴
      type: 'value'
    },
    yAxis:[ {
      type: 'category',
      inverse:true,               //让y轴数据逆向
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'   ,    //y轴字体颜色
        },
        formatter: function(params, index) {
          // return [
          //           //   '{lg|' + (index + 1) + '}' + '{title|' + value + '} '
          //           // ].join('\n');
          for (var i = 0; i < 10; i++) {
            if (countryData[i] == params) {
              var j = i + 1
              if (i == 0) {
                return '{a|' + j + '} ' + params
              } if (i == 1) {
                return '{b|' + j + '} ' + params

              } if (i == 2) {
                return '{c|' + j + '} ' + params
              } if (i > 2) {
                return '{d| ' + j + '}' + params
              }
            }

          }
        },
        //定义富文本标签
        rich: {
          lg: {
            fontWeight: 'bold',
            align:"left",
            fontSize: 12,       //字体默认12
            color: '#fff',
            padding: [0, 5, 0, 0]
          },
          title: {
            color: '#fff',
            fontWeight: 'lighter',
            // borderWidth: 1,
            // borderColor: '#08c'
            // textareaBorderColor: '#08c',
          }
        }
      },
      splitLine: {show: false},   //横向的线
      axisTick: {show: false},    //y轴的端点
      axisLine: {show: false},    //y轴的线
      data: countryData
    },
      {
        show: true,
        inverse: true,
        data:num,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },

      }],
    series: [
      {
        name: '数据内框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgb(40,97,214)'
            },
              {
                offset: 1,
                color: 'rgb(47,230,252)'
              }
            ], false),
          }
        },

        /*label: {
            normal: {
                show: true,
                position: 'right',
                color: 'red',
                fontSize: 14,
                formatter:
                function(param) {
                    // return 'xx';
                },
            }
        },*/
        barWidth: 10,
        data: num
      },
      {
        name: '外框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
          }
        },
        barGap: '-100%',
        z: 0,
        barWidth: 10,
        data: [2000, 2000, 2000, 2000, 2000,2000,2000, 2000, 2000, 2000]
      }
    ]
  };


  myChart.setOption(option);
}
buildChart6()
//入境游接待
let entryDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
let entryNum = [1780, 1690, 1810, 1890, 1900, 1920, 1856, 1809,1850,1840,1862,1813,]
// 增长率
let entryRate =[ 14.0, 12.0, 15.6, 14.9,13.0,13.40,13.2,13.0,13.80, 13.90, 11.0, 9.0,]
function buildChart7() {
  var myChart = echarts.init(document.getElementById('entry'));

  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['客流量' ,'环比增长率'],
      right:"10%",
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data:entryDate,
    }],
    yAxis: [
      {
        name:'(万人)',
        nameTextStyle:{
          color:"#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '客流量',
        type: 'bar',
        barMaxWidth: 12,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(47,230,252)'
            },
              {
                offset: 1,
                color: 'rgb(40,97,214)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: entryNum
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "rgba(13,241,222,1)"
        },
        data: entryRate
      }
    ]
  };


  myChart.setOption(option);
}
buildChart7()
$(".radio-box #yearEntry").click(function (e) {
  entryDate = ['2019','2018','2017','2016','2015']
  entryNum = [23555,12541,21541,12423,21541,]
  entryRate = [13.2,13.0,14.0,10.4,11.1]
  buildChart7()
});
$(".radio-box #monthlyEntry").click(function (e) {
  entryDate = ['01', '02', '03', '04', '05', '06', '07', '08','09','10','11','12']
  entryNum = [1780, 1690, 1810, 1890, 1900, 1920, 1856, 1809,1850,1840,1862,1813,]
  entryRate =[ 14.0, 12.0, 15.6, 14.9,13.0,13.40,1.32,1.30,13.80, 13.90, 1.10, 9.0,]
  buildChart7()
});
